Layerize

Turn HTML to After Effects layers

Made by Towfiq · towfiqislam.com · Instagram

Ask Claude for a motion video, and Layerize rebuilds it in After Effects with every box, word, picture and sound on its own editable layer, with all the animation as keyframes. Set it up once in two steps, then use it as often as you like.

Install the Layerize skill in Claude

The skill teaches Claude to build videos in the exact format Layerize imports perfectly.

Claude app desktop or web

Open Claude and go to Settings → Capabilities → Skills.
Click Upload skill.
Choose Layerize Skill - upload to Claude app.zip from this folder.
Make sure the layerize skill is switched on.

Claude Code optional

Nothing to do: the plugin installer in step 2 adds the skill to Claude Code automatically.

If you also have the codeflow skill turned on, turn it off so the two skills don't compete.

Install the plugin in After Effects

One double-click. Works with After Effects 2019 and newer.

Mac

Quit After Effects.
Double-click Install on Mac.command.
If macOS blocks it: right-click the file → Open → Open.
Wait for All done!, then press any key.

Windows

Close After Effects.
Double-click Install on Windows.bat.
If Windows warns you: More info → Run anyway.
Wait for All done!, then press any key.

Open it

Start After Effects and choose Window → Extensions → Layerize. Dock the panel anywhere you like.

The installer copies the plugin into After Effects and turns on Adobe's PlayerDebugMode, which After Effects needs to load panels that aren't signed by Adobe. It only affects After Effects panels, for your user account.

Ask Claude for your video

Describe the video you want and mention layerize in your prompt. Claude builds it as an HTML file.

Make a 10-second promo for my coffee shop with bold kinetic text and background music, layerize.

Turn this script into a vertical 1080×1920 Instagram reel with animated captions, layerize.

Make this video editable in After Effects, layerize.

What Claude gives you

A folder with YourVideo.html and an assets folder (pictures, clips, music, fonts).
The full path to the HTML file, which fonts it uses, and which parts (if any) will come in as pictures.
Double-click the HTML file to watch it in your browser before importing.

Keep the HTML file and its assets folder together. Layerize reads both.

Import into After Effects

Every element arrives as its own layer, ready to re-edit.

Open the Layerize panel.
Drop your HTML file on the panel, or click Choose HTML….
Click Import to After Effects and wait while it reads the frames.
A new comp opens: shapes, text, pictures, video and sound on separate layers, animation as keyframes.

The project, a copy of every asset and a log are saved to Documents/Layerize Projects/<name> <date>/.

Fonts install themselves. If the panel says it installed a new font, restart After Effects and import once more so the text uses it.

Try it now

Import Demo video/demo.html from this folder to see Layerize in action.

What becomes what

In the video	In After Effects
Boxes, borders, rounded corners, shadows	Shape layers
Words (including Arabic and other right-to-left text)	Editable text layers
Counters and typewriter text	Source Text keyframes
Frosted glass	Blur adjustment layer in the box's shape
Pictures, video clips, music, sound effects	Footage and audio layers, at the right time
Masked reveals (`overflow: hidden`)	Track mattes
All movement	Position, scale, rotation, opacity and blur keyframes

Comes in simplified: 3D tilts become 2D, gradients with 3+ colours become 2 colours, and animated SVG or canvas drawings come in as image sequences.

If something isn't right

Problem	Fix
Layerize isn't in Window → Extensions	Run the installer again, then quit After Effects completely and reopen it.
The panel opens blank	Run the installer again (it turns on `PlayerDebugMode`), then restart After Effects.
"Install these fonts…" in the log	Install that font yourself, then import again.
Arabic letters look disconnected	After Effects → Preferences → Type → South Asian and Middle Eastern, then restart.
Claude didn't make an HTML file	Check the layerize skill is on (step 1) and that your prompt says "layerize".
Uninstall	Open Files - do not change and double-click Uninstall on Mac.command or Uninstall on Windows.bat.

Help and support

Found a bug? Click Report a bug at the bottom of the Layerize panel. It writes the email for you, with the details I need to fix it.

✉️ Email Towfiq 🌐 Website 📸 Instagram ☕ Buy the developer a coffee